<!DOCTYPE html>
<%@page import="mobi.weq.model.User"%>
<%@page import="mobi.weq.util.Util"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Settings</title>
<jsp:include page="/jsp/templates/header.jsp" />

<link href="js/bootstrap-switch/bootstrap-switch.css" rel="stylesheet">
<script src="js/bootstrap-switch/bootstrap-switch.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="css/radio.css">

<script type="text/javascript" src="js/feedback.js"></script>
<style type="text/css">
.property {
	font-size: 24px;
	line-height: 40px;
}
</style>
</head>
<body>
	<!-- Fixed navbar -->
	<header class="title"> Your feedback</header>
	<div class="content">
		<%
			User user = Util.getUserFromSession(request, response);
			if (user != null) {
		%>
		<div class="panel panel-default" style="background-color: transparent;">
			<div class="alert alert-info" role="alert" style="padding: 15px; text-align: center; margin-bottom: 10px;">
				<h3>How does the air pollution feel to you today?</h3>
			</div>
			<form class="radioGroup">
				<ul class="list-group">
					<li class="list-group-item">
						<input id="low-btn" type="radio" value="0" hidden name="feedback">
						<label for="low-btn" class="property low-color-2">Low</label>
					</li>
					<li class="list-group-item">
						<input id="moderate-btn" type="radio" value="1" hidden type="radio" name="feedback">
						<label for="moderate-btn" class="property moderate-color-2">Moderate</label>
					</li>
					<li class="list-group-item">
						<input id="high-btn" type="radio" value="2" hidden name="feedback">
						<label for="high-btn" class="property high-color-2">High</label>
					</li>
					<li class="list-group-item">
						<input id="very-high-btn" hidden value="3" type="radio" name="feedback">
						<label for="very-high-btn" class="property very-high-color">Very High </label>
					</li>
				</ul>
				<div class="hidden">
					<input value="" name="latitude">
					<input value="" name="longitude">
				</div>
			</form>
			<div class="panel-footer" style="text-align: center;">
				<div class="row">
					<div class="col-xs-6"><div class="alert alert-success" role="alert" id="messages" style="padding: 5px; margin-bottom: 0; display: none"></div></div>
					<div class="col-xs-6"><button id="send-update-btn" class="btn btn-warning">Send Update</button></div>
				</div>
			</div>
		</div>
		<%
			}
		%>
	</div>
	<jsp:include page="/jsp/templates/footer.jsp" /></body>
</html>